<template>
  <canvas
    :id="cid"
    type="webgl"
    :style="{ width: props.width + props.unit, height: props.height + props.unit }"
    :canvas-id="cid"
  ></canvas>
</template>
<script lang="ts" setup>
/**
 * 使用前必须安装pag文件,
 * 微信端:npm install libpag-lite-miniprogram
 * H5,浏览器端:npm install libpag-lite
 */
import { getCanvas } from '@/tmui/tool/function/getCanvas'
import { getCurrentInstance, onMounted } from 'vue'

// #ifdef H5 || APP-VUE
import { PAGView, types } from './pag.esm.js'
// #endif
// #ifdef MP-WEIXIN
import { PAGView } from './pag'
// #endif
const proxy = getCurrentInstance()?.proxy ?? null
const props = defineProps({
  width: {
    type: Number,
    default: 750,
  },
  height: {
    type: Number,
    default: 500,
  },
  /** 如果提供了就会默认加载出来 */
  url: {
    type: String,
    default: '',
  },
  /** 当前提供了url资源后,这里为true就会自动播放 */
  autoPlay: {
    type: Boolean,
    default: true,
  },
  /** 0表示无限循环. */
  loop: {
    type: Number,
    default: 0,
  },
  unit: {
    type: String,
    default: 'rpx',
  },
})
const cid = 'c_' + uni.$tm.u.getUid()
const pag: any = null

onMounted(() => {
  setTimeout(function () {
    init()
  }, 100)
})
function init() {
  return new Promise((resolve, rejecj) => {
    if (!props.url) return
    getPag().then((d) => {
      uni.request({
        url: props.url,
        method: 'GET',
        responseType: 'arraybuffer',
        success(res) {
          const pagView = PAGView.init(res.data, d.ctx, {
            renderingMode: 'Webgl',
            useScale: true,
          })
          pagView.setRepeatCount(props.loop)
          pagView.setScaleMode('LetterBox')
          if (props.autoPlay) {
            pagView.play()
          }
        },
        fail(error) {
          console.error('资源加载出错:', error)
          rejecj(error)
        },
      })
    })
  })
}
function getPag(): Promise<{ ctx: WebGLContextEvent; pag: PAGView }> {
  return new Promise((resolve, rejecj) => {
    getCanvas(proxy, cid).then((vx) => {
      let ctx = vx.node
      // #ifdef H5
      ctx = vx.node
      // #endif
      resolve({
        ctx: ctx,
        pag: PAGView,
      })
    })
  })
}
</script>
